<template>
	<view class="bg min100" style="padding-bottom:118rpx;">
		<view class="status_bar"></view>
		<view class="back">
		  <image src="../../static/back.png" @click="handleBack"></image>
		</view>
		<view>
			<!-- <view class="image-wrap"> -->
			  <image :src="info.images" class="collectImg" mode="aspectFill"></image>
			<!-- </view> -->
			<!-- 头部 -->
			<view class="topWrap white">
				<view class="plr-20 mt-30">
					<view class="size-36">
						{{info.name}}
					</view>
					<view class="size-50 bold mb-30 gold mt-10">
						￥{{info.price}}
					</view>
				</view>
			</view>
			
			<!-- 介绍 -->
			<view class="plr-20">
				<view class="radius-16 mt-30 plr-30 ptb-30" style="background: #fff;">
					<view class="">
						<view class="white size-28">
							您可能抽到以下藏品中的1个
						</view>
					</view>
					<empty v-if="info.goods.length==0"></empty>
					<view class="" v-else>
						<view class="flex gray-2 ptb-20 flex-between" style="border-bottom:1rpx solid #f5f5f5"
							v-for="(item,index) in info.goods" :key="index">
							<view class="flex">
								<image style="width:88rpx;height:88rpx;border-radius: 8rpx;" :src="item.image" mode="aspectFill">
								</image>
								<view class="ml-20">
									<view class="mb-20 white">
										{{item.name}}
									</view>
									<view>
										<text class="size-28" style="color: #7c7c7c">价值：</text><text class="gold">￥{{item.price}}</text>
									</view>
								</view>
							</view>
							<view class="white">
								概率：{{item.rate}}%
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 介绍 -->
			<view class="mt-10 plr-20 ptb-30" v-if="info.content">
				<view class="mb-30 size-32 white">
					作品故事
				</view>
				<view class="white infoWrap" v-html="info.content">

				</view>
			</view>
		</view>
		<view class="btmWrap flex1 flex-center flex-middle plr-30" v-if="info.status==1||info.status==2">
			<!-- <button class="saleBtn" v-if="(info.status==1||info.status==2)  && goods_status == 1" @click="transferShow=true">转赠</button> -->
			<!-- <button class="saleBtn ml-20" v-if="info.status==1||info.status==2"
				@click="changeShow=true;afterPrice=info.price">改价</button> -->
			<button class="transBtn ml-20" @click="submitOpen" v-if="info.status == 1">拆开</button>
			<button class="saleBtn ml-20" @click="saleShow=true;salePrice=info.price"
				v-if="info.status==1&&is_trade==1">出售</button>
			<button class="saleBtn ml-20" @click="upCollect()" v-if="info.status==2">
				<text v-if='info.is_show==1'>下架</text>
				<text v-if='info.is_show==0'>上架</text>
			</button>
		</view>
		<!-- 预览图片 -->
		<u-popup v-model="preShow" mode='center' border-radius='20'>
			<view>
				<image :src="info.images" class="collectPreImg"></image>
			</view>
		</u-popup>
		<!-- 转赠 -->
		<u-popup v-model="transferShow" mode="center" border-radius="20">
			<view class="plr-30 ptb-30">
				<view class="text-center size-32 bold">转赠</view>
				<u-field v-model="transferPhone" maxlength="11" label-width="0" placeholder="请输入受赠人手机号" />
				<u-field
						v-model="captcha"
						maxlength="6"
						label-width="0"
						placeholder="请填写验证码"
					>
						<u-button size="mini" slot="right" hover-class="none" class='code' @click="getCode(1)">{{codeText}}</u-button>
					</u-field>
					<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
				<u-button @click="submitTransfer" hover-class="none" type="primary" class="mt-30">确认</u-button>
			</view>
		</u-popup>
		<!-- 动图 -->
		<u-mask :show="gifShow" @click="gifShow = false">
			<view class="openGif">
				<image class="gifImg" :src="gifUrl"></image>
			</view>
		</u-mask>
		<!-- 打开 -->
	<!-- 拆开结果 -->
	<u-popup v-model="openPop" class="openWrap" mode="center" border-radius="20" width="500rpx;">
		<view class="popWrap text-center size-24">
			<image :src="openfig.image" class="openImg radius-20"></image>
			<view class="white mb-20 mt-40">
				{{openfig.name}}
			</view>
			<view class="gray-2">
				价值：<text class='red'>￥{{openfig.price}}</text>
			</view>
		</view>
		<image @click="closeOpen" src="../../static/close.png" class="closeIcon" mode=""></image>
	</u-popup>
		<!--出售 -->
		<u-popup v-model="saleShow" width="90%" mode="center" border-radius="20">
			<view class="plr-30 ptb-30">
				<view class="text-center bold size-32 bold">出售</view>
				<u-field v-model="salePrice" label="￥" label-width="10" maxlength="11" placeholder="请输入价格" type="number" />
				<u-field
						v-model="captcha"
						maxlength="6"
						label-width="0"
						placeholder="请填写验证码"
					>
						<u-button size="mini" slot="right" hover-class="none" class='code' @click="getCode(2)">{{codeText}}</u-button>
					</u-field>
					<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
				<u-button style="width:590rpx" hover-class="none" class="mt-30 btn" @click="submitSale">确认
				</u-button>
			</view>
		</u-popup>
		<!-- 改价 -->
		<u-popup v-model="changeShow" width="90%" mode="center" border-radius="20">
			<view class="plr-30 ptb-30">
				<view class="text-center bold size-32 bold">改价</view>
				<u-field v-model="afterPrice" label="￥" label-width="10" placeholder="请输入价格" type="number" />
				<u-button style="width:590rpx" hover-class="none" type="primary" class="mt-30" @click="submitChange">确认
				</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import empty from "../../components/empty.vue"
	export default {
		components: {
			empty
		},
		data() {
			return {
				gifUrl: "../../static/open.gif",
				gifShow: false, //盲盒动图
				preShow: false,
				changeShow: false,
				afterPrice: '',
				id: '',
				transferPhone: '',
				transferShow: false,
				openfig: {},
				openPop: false,
				salePrice: '',
				saleShow: false,
				info: {
					goods: []
				},
				is_trade: 0,
				goods_status:0,
				captcha:'',
				codeText:'',//
				userInfo:{},//
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getUserInfo()
			this.$http('api/login/helpContent').then(res => {
				this.is_trade = res.is_trade;
				this.goods_status = res.goods_status;
			})
		},
		onShow() {
			this.init();
			
		},
		methods: {
			getUserInfo () {
				this.$http('api/user/userInfo').then(res => {
				  this.userInfo = res
				})
			},
			codeChange(text) {
				this.codeText = text;
			},
			getCode(type) {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$http('api/login/sendCode',{
						phone:this.userInfo.phone,
						type:type == 1 ? 2 : 8
					},'GET').then(res=>{
						uni.hideLoading();
						this.$refs.uCode.start();
					}).catch(err=>{
						console.log(err);
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			handleBack() {
			  if (getCurrentPages().length === 1) {
			    uni.switchTab({
			      url: '/pages/home/index',
			    })
			  } else {
			    uni.navigateBack()
			  }
			},
			closeOpen(){
				this.openPop=false;
				uni.switchTab({
					url:'/pages/my/index'
				})
			},
			init() {
				this.$http('api/orders/userBoxDetail', {
					id: this.id
				}).then(res => {
					this.info = res;
				})
			},
			// 转增
			submitTransfer() {
				if (this.transferPhone == "") {
					uni.showToast({
						title: "请输入受赠人手机号!",
						icon: "none"
					})
					return;
				}
				if (!this.captcha) return uni.showToast({
						title: "请输入验证码",
						icon: "none"
					})
				this.$http('api/orders/boxTransfer', {
					id: this.id,
					phone: this.transferPhone,
					captcha:this.captcha
				}, 'POST').then(res => {
					uni.showToast({
						title: "转赠成功!",
						icon: "none"
					})
					this.transferShow = false;
					this.transferPhone = '';
					setTimeout(() => {
						uni.switchTab({
							url:'/pages/my/index'
						})
					}, 500)
				})
			},
			// 打开
			submitOpen() {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '立即拆开?',
					success: function(res) {
						if (res.confirm) {
							_this.$http('api/orders/boxOpen', {
								id: _this.id
							}, 'POST').then(res => {
								_this.gifUrl = `../../static/open.gif?${new Date().getTime()}`
								_this.gifShow = true;
								setTimeout(() => {
									_this.gifShow = false;
									_this.openfig = res;
									_this.openPop = true;
								}, 3800)
							})
						} else if (res.cancel) {
							uni.showToast({
								title: "取消操作!",
								icon: "none"
							})
						}
					}
				});
			},
			// 出售
			submitSale() {
				if (this.salePrice == "") {
					uni.showToast({
						title: "请输入价格!",
						icon: "none"
					})
					return;
				}
				this.$http('api/orders/boxSale', {
					id: this.id,
					price: this.salePrice,
					captcha:this.captcha
				}, 'POST').then(res => {
					uni.showToast({
						title: "出售成功!",
						icon: "none"
					})
					this.saleShow = false;
					setTimeout(() => {
						uni.switchTab({
							url:'/pages/my/index'
						})
					}, 500)
				})
			},
			//上架
			upCollect() {
				let _this = this;
				let msg = _this.info.is_show == 1 ? '下架?' : '上架?';
				uni.showModal({
					title: '提示',
					content: "将此盲盒" + msg,
					success: function(res) {
						if (res.confirm) {
							_this.$http('api/orders/boxUpdateShow', {
								id: _this.id,
								is_show: _this.info.is_show == 1 ? 0 : 1
							}, 'POST').then(res => {
								uni.showToast({
									title: "操作成功!",
									icon: "none"
								})
								_this.init();
							})
						} else if (res.cancel) {
							uni.showToast({
								title: "取消操作!",
								icon: "none"
							})
						}
					}
				});
			},
			// 改价
			submitChange() {
				if (this.afterPrice == "") {
					uni.showToast({
						title: "请输入价格!",
						icon: "none"
					})
					return;
				}
				this.$http('api/orders/boxUpdatePrice', {
					id: this.id,
					price: this.afterPrice
				}, 'POST').then(res => {
					uni.showToast({
						title: "改价成功!",
						icon: "none"
					})
					this.changeShow = false;
					this.init();
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.white{
		color: #3c3c3c;
	}
	.gold {
  color: #9c8b66;
}
	.btn {
		height: 88rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		background: linear-gradient(90deg, #EEA634, #DE2D32);
		border-radius: 44rpx;
		&::after {
			border: none;
		}
	}
	.back {
	  position: relative;
	  height: 0;
	  image {
	    position: absolute;
	    width: 20rpx;
	    height: 36rpx;
	    top: 30rpx;
	    left: 30rpx;
		z-index: 99;
	  }
	}
	.collectImg {
		width: 100%;
		height: 450rpx;
	}
	.userImg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}


	.btmWrap {
		position: fixed;
		z-index: 10;
		width: 100%;
		bottom: 0;
		height: 118rpx;
		background:#fff;

		uni-button {
			font-size: 30rpx;
			line-height: 78rpx;
			width: 100%;
			height: 78rpx;
			color: #FFFFFF;
			padding: 0;
			margin: 0;
			background: linear-gradient(90deg, #E6867F 0%, #E692EC 100%);
			border-radius: 39rpx;
			&::after {
				border: none;
			}
		}

		.transBtn {
			
			background: linear-gradient(90deg, #EEA634, #DE2D32);
		}

		.saleBtn {
			margin-left: 30rpx;
		background: linear-gradient(90deg, #E6867F 0%, #E692EC 100%);
		}
	}

	.buyBtn {
		font-size: 28rpx;
		color: #040404;
		line-height: 80rpx;
		height: 80rpx;
		background: #EFE0C0;
		border-radius: 40rpx;
		width: 210rpx;
	}

	.tipsLeft {
		background: #EFAA1C;
		color: #2f2f2e;
	}

	.infoWrap {
		/deep/ img {
			width: 100% !important;
			height: auto;
		}
	}

	.itemTips {
		font-size: 28rpx;
		background: #DEE4E8 !important;
		border-radius: 40rpx;
	}

	.popWrap {
		background: url(../../static/openImg.png) 0 0 no-repeat;
		background-size: 100% 100%;
		width: 500rpx;
		height: 526rpx;
		padding-top: 128rpx;
		position: relative;

		.openImg {
			width: 240rpx;
			height: 240rpx;
			background: #666;
		}
	}

	.openGif {
		width: 500rpx;
		height: 500rpx;
		margin: 400rpx auto 0;

		.gifImg {
			width: 500rpx;
			height: 500rpx;
		}
	}

	.closeIcon {
		width: 60rpx;
		height: 60rpx;
		margin: 30rpx auto;
		display: block;
	}
	.openWrap {
		/deep/ .u-mode-center-box {
			background-color: transparent;
		}
	}
</style>
